<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap 实例 - 响应式的导航栏</title>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/jfcss.css" rel="stylesheet">
    <script src="js/jquery-3.1.0.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/jquery.goup.min.js"></script>
    <script type="text/javascript" src="js/jframe.js"></script>
    <script type="text/javascript" src="js/login.js"></script>
</head>
<body >
<nav id="jf-head-nav" class="navbar navbar-default navbar-fixed-top" role="navigation">

</nav>
<div class="container">

    <div class="row">
        <div class="col-md-9 col-sm-12">

            <div class="jf-hr">
                个人设置
            </div>

            <div class="col-md-5">
                <form class="form-horizontal" style="margin-top: 20px">
                    <div class="form-group">

                        <label for="nick-name" class="col-sm-2 control-label">昵称</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="nick-name"
                                   placeholder="请输入昵称">
                        </div>


                        <label for="user-desc" class="col-sm-2 control-label">昵称</label>
                        <div class="col-sm-10">
                            <textarea type="text" class="form-control" id="user-desc"
                                      placeholder="请输入描述"></textarea>
                        </div>

                    </div>
                </form>


            </div>
            <div class="col-md-7"></div>

        </div>


        <!-- 右侧展示栏-->
        <div class="col-md-3 hidden-xs hidden-sm">
            <div class="panel panel-default">
                <div class="panel-body">
                    <p>
                        Bootstrap 导航栏可以动态定位。默认情况下，它是块级元素，它是基于在 HTML 中放置的位置定位的。通过一些帮助器类，您可以把它放置在页面的顶部或者底部，或者您可以让它成为随着页面一起滚动的静态导航栏。
                        如果您想要让导航栏固定在页面的顶部，请向 .navbar class 添加 class .navbar-fixed-top。下面的实例演示了这点：
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container" style="margin-top: 100px">
    <footer >
        <div style="text-align: center">
            Copyright © 2016 jframe.cn<br>
            蜀ICP备16009498号
        </div>

    </footer>
</div>


</body>
</html>
